<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="用户信息" min-width="160">
            <template slot-scope="scope">
              <div class="fx" style="justify-content: flex-start">
                <div class="tc" style="margin-right: 20px">
                  <img
                    style="width: 50px; height: 50px"
                    :src="imgError(scope.row.avatar)"
                    class="user_img"
                  />
                  <span>{{ scope.row.rating_cn || "---" }}</span>
                </div>
                <div class="user_table">
                  <p>
                    <span>用户账号：</span>
                    <small>{{ scope.row.username || "---" }}</small>
                  </p>
                  <p>
                    <span>用户昵称：</span>
                    <small>{{ scope.row.nickname || "---" }}</small>
                  </p>
                  <p>
                    <span>手机号码：</span>
                    <small>{{ scope.row.tel || "---" }}</small>
                  </p>
                  <p>
                    <span>推荐人：</span>
                    <small>{{ scope.row.tid_cn || "---" }}</small>
                  </p>
                  <p>
                    <span>股东客源数：</span>
                    <small>{{ scope.row.ynumber || 0 }}人</small>
                  </p>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="股东信息" min-width="180">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>股东权益：</span>
                  <small>{{
                    scope.row.is_shareholder == 1
                      ? "单店股东"
                      : scope.row.is_shareholder == 2
                      ? "全量股东"
                      : "---"
                  }}</small>
                </p>
                <p>
                  <span>成为股东时间：</span>
                  <small>{{
                    scope.row.shareholder_time | getTimeFormat
                  }}</small>
                </p>
                <template v-if="scope.row.apply && scope.row.apply.id">
                  <p>
                    <span>真实姓名：</span>
                    <small>{{ scope.row.apply.name || "---" }}</small>
                  </p>
                  <p>
                    <span>联系方式：</span>
                    <small>{{ scope.row.apply.tel || "---" }}</small>
                  </p>
                  <p>
                    <span>身份证号：</span>
                    <small>{{ scope.row.apply.card || "---" }}</small>
                  </p>
                </template>
                <template
                  v-if="
                    scope.row.is_shareholder == 1 &&
                    scope.row.shareholder_extract > 0
                  "
                >
                  <p>
                    <span>店铺名称：</span>
                    <small>{{ scope.row.extract_title || "---" }}</small>
                  </p>
                  <p>
                    <span>店铺区域：</span>
                    <small>
                      {{ scope.row.extract_province }}{{ scope.row.extract_city
                      }}{{ scope.row.extract_area }}{{ scope.row.extract_town }}
                    </small>
                  </p>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="营销数据" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>客户数：</span>
                  <small>{{ scope.row.khs }} </small>
                </p>
                <p>
                  <span>营业额：</span>
                  <small>{{ scope.row.yye | keepTwoNum }} </small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="资金" min-width="160">
            <template slot-scope="scope">
              <div class="user_table">
                <p v-for="(item, x) in scope.row.reward_ar" :key="x">
                  <span>{{ item.title }}：</span>
                  <small>{{ item.value | keepTwoNum }} </small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="140" align="center">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                @click="editBtn(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                :loading="$store.state.isLoading"
                type="warning"
                size="mini"
                @click="equity(scope.row)"
              >
                权益送券
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      title="编辑"
      :modal-append-to-body="false"
      :visible.sync="show_edit"
      class="tl size_13"
      width="700px"
    >
      <el-form label-width="120px">
        <el-form-item label="股东身份：">
          <el-col :span="18">
            <el-radio-group v-model="editInfo.is_shareholder">
              <el-radio label="0">无</el-radio>
              <el-radio label="1">单店股东</el-radio>
              <el-radio label="2">全量股东</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>

        <el-form-item label="所属店铺" v-if="editInfo.is_shareholder == 1">
          <el-col :span="18">
            <el-input
              v-model="editInfo.extract_title"
              size="small"
              disabled
            ></el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="primary"
              @click="xzshop('xz_extract')"
            >
              选择
            </el-button>
          </el-col>
        </el-form-item>

        <div class="tc">
          <el-button
            :loading="$store.state.isLoading"
            size="small"
            @click="saveBtn"
          >
            确定
          </el-button>
        </div>
      </el-form>
    </el-dialog>

    <keep-alive>
      <component
        :is="current"
        :show="show_xz"
        :isAll="false"
        showType="list"
        @sendShop="getSend"
        @isshow="getShow"
      ></component>
    </keep-alive>

    <el-dialog
      :close-on-click-modal="false"
      title="查看图片"
      :modal-append-to-body="false"
      :visible.sync="show_img"
      class="tl size_13"
      width="700px"
    >
      <img :src="img" width="100%" />
    </el-dialog>
  </div>
</template>

<script>
import xz_extract from "@/components/currency/xz_extract.vue";
import { shareholderUserSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
export default {
  data() {
    return {
      userSearchData: shareholderUserSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      editInfo: {},
      show_edit: false,
      current: "",
      show_xz: false,
      show_img: false,
      img: "",
    };
  },
  components: {
    xz_extract,
    compressimgUpload,
  },
  created() {
    this.getNewsAll();
  },
  methods: {
    equity(val) {
      this.$store.commit("addbreadcrumbs", {
        title: "权益送券",
        url: `/index/operate_staff/equity_list?id=${val.id}&username=${val.username}`,
      });
      this.$router.push({
        path: "/index/operate_staff/equity_list",
        query: { id: val.id, username: val.username },
      });
    },
    xzshop(str) {
      this.current = str;
      this.show_xz = true;
    },
    getShow(val) {
      this.show_xz = val;
    },
    getSend(row) {
      if (this.current == "xz_extract") {
        this.editInfo.extract_title = row.title;
        this.editInfo.shareholder_extract = row.id;
      }
    },
    saveBtn() {
      var params = JSON.parse(JSON.stringify(this.editInfo));
      this.$api.getStation.shareholder_saveedit(params).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "编辑成功" });
          this.getNewsAll(this.searchAll);
          this.show_edit = false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    editBtn(item) {
      this.editInfo = {
        id: item.id,
        is_shareholder: item.is_shareholder,
        extract_title: item.extract_title,
        shareholder_extract: item.shareholder_extract,
      };
      this.show_edit = true;
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;

      this.$api.getStation.shareholder_user_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      return item;
    },
  },
};
</script>

<style>
</style>